<template>
  <a-table
    :columns="columns"
    :data-source="list"
    :pagination="{
      current: pageNo,
      total,
      pageSize,
      showSizeChanger: false,
      onChange: this.tablePageChange,
    }"
    :row-key="(record) => record.id"
    :scroll="{ y: 380 }"
  >
    <span slot="select" slot-scope="text, record">
      <a-radio :checked="record.isChecked" @click="change(record)"></a-radio>
    </span>

    <span slot="name" slot-scope="text, record">
      <div class="imgTxt">
        <a-avatar
          :src="record.cover_pic"
          shape="square"
          :size="48"
          icon="user"
        />
        <div class="txt">
          <div class="tit">
            <a-tooltip>
              <template slot="title">
                {{ record.name }}
              </template>
              {{ record.name }}
            </a-tooltip>
          </div>
          <div class="attr">
            <a-tooltip>
              <template slot="title">
                {{ getAttr(record.attr) }}
              </template>
              {{ getAttr(record.attr) }}
            </a-tooltip>
          </div>
        </div>
      </div>
    </span>
  </a-table>
</template>

<script>
import { getUrlParam, getDiyURLText } from "@/utils/utils.js";
import { getActivityGoods } from "@/api/diy";

const columns = [
  {
    title: "选择",
    scopedSlots: {
      customRender: "select",
    },
    width: 60,
  },
  {
    title: "ID",
    dataIndex: "id",
    width: 100,
  },
  {
    title: "商品信息",
    dataIndex: "name",
    scopedSlots: { customRender: "name" },
  },
];

export default {
  data() {
    return {
      total: 0,
      pageNo: 1,
      pageSize: 10,
      columns,
      list: [],
    };
  },

  props: {
    link: {
      type: Object,
      default() {
        return null;
      },
    },

    type: {
      type: String,
      default: "",
    },
  },

  watch: {
    type() {
      this.getList();
    },
  },

  computed: {
    getAttr() {
      return (attr) => {
        if (!attr) return "";
        let str = "";
        attr = JSON.parse(attr);
        attr.forEach((e) => {
          str += e.attr_list.map((el) => el.attr_name).join("-") + "、";
        });

        return (str = str.slice(0, str.length - 1));
      };
    },
  },

  created() {
    this.getList();
  },

  methods: {
    // 分页请求
    tablePageChange(e) {
      this.getList(e);
    },

    updateParam(value, type) {
      this.queryParam[type] = value;
      this.getList();
    },

    // 获取数据列表
    async getList(pageNo = 1) {
      if (getUrlParam("store_id")) this.store_id = getUrlParam("store_id");
      const hide = this.$message.loading("加载中", 0);
      let { pageSize, type } = this;

      const res = await getActivityGoods({
        pageSize,
        pageNo,
        type,
      });

      if (res.code == 0) {
        let { totalCount, list: data } = res.data;
        this.pageNo = pageNo;
        this.total = totalCount;

        data = data.map((el) => {
          el.isChecked = false;
          return el;
        });
        this.list = data || [];
      }

      hide();
    },

    change(item) {
      let link = getDiyURLText(this.link, item);

      this.$emit("handle", "link", link);

      this.$nextTick(() => {
        this.list.forEach((el) => {
          el.isChecked = false;
        });
        item.isChecked = true;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.table-page-search-box {
  padding-bottom: 24px;
}

::v-deep {
  .ant-form-item {
    display: flex;
    align-items: center;
  }

  .ant-form-item-control-wrapper {
    flex: 1;
  }

  .ant-form-item-control {
    line-height: 32px;
  }
}

.flex {
  display: flex;
  align-items: center;
}

.imgTxt {
  display: flex;
  width: 100%;

  .txt {
    margin: 2px 0 0 10px;
    flex: 1;
    overflow: hidden;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
  }

  .tit,
  .attr {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
}
</style>
